<template>
  <div class="common-layout">
    <el-container style="height: 100vh; overflow: hidden">
      <el-aside width="(isCollapse ? '64px' : '208px')">
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            style="width: 100%;height: 100%;min-height: 100vh"
            default-active="2"
            text-color="#fff"
            unique-opened
            router
            :collapse="isCollapse"
            :collapse-transition="false"
            @select="selectMenu"
        >
          <el-row style="padding-top: 10px;">
            <!-- 占位左侧空白区域 -->
            <el-col :span="2">
            </el-col>
            <!-- 显示系统logo -->
            <el-col :span="7" style="padding-left:7px;">
              <el-avatar src="/imgs/logo.png" style="width:35px;height:35px;"></el-avatar>
            </el-col>
            <!-- 根据菜单折叠状态动态调整宽度，显示系统名称 -->
            <el-col :span="isCollapse ? 0 : 13" v-show="!isCollapse">
              <router-link to="/" style="color:#fff;text-decoration:none;position:relative;top:8px;left:2px;font-weight: bold;font-size: small">
                舆情监测系统
              </router-link>
            </el-col>
          </el-row>

          <el-menu-item index="/total">
            <el-icon><House /></el-icon>
            <template #title>
              <span>首页</span>
            </template>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>热搜详情</span>
            </template>
            <el-menu-item index="/present">单日热搜</el-menu-item>
            <el-menu-item index="/history">历史七天</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/graph">
            <el-icon><setting /></el-icon>
            <template #title>
              <span>热搜分析</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="flex-direction: column; height: 100%">
        <!-- 右侧顶栏 -->
        <el-header style="background-color:#fff; padding-top:22px; height:10vh; width: 100%">
          <el-row :gutter="10" style="width: 100%; display: inline-flex; margin-bottom: 5px">
            <!-- 导航栏折叠按钮 -->
            <el-col :span="22" style="text-align: left">
              <el-icon style="font-size:20px; position:relative; top:3px;" @click="changeCollapsed"><Expand /></el-icon>
            </el-col>
            <!-- 用户信息/登出 -->
            <el-col span="2">
              <div style="justify-content: flex-end;">
                <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  {{user ? user.userName : '默认用户名'}}
                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>

          <!-- 面包屑 -->
          <el-breadcrumb
              :separator-icon="ArrowRight"
              style="margin-top: 20px; margin-left: 6px"
          >
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadCrumb">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main style="padding: 0; min-height: 90vh; overflow-y: auto;">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Setting, View, Expand, ArrowRight, House,
} from '@element-plus/icons-vue'
  import {ref} from "vue";

  let isCollapse = ref(false)

  const changeCollapsed = () => {
    isCollapse.value = !isCollapse.value;
  }

  const logout = () => {
    if (confirm("确定要退出吗？")) {
      localStorage.removeItem('user');
      window.location.href = '/login';
      if (user != null) {
        user.value = null;
      }
    }
  }

  let map: {[key: string]: string[]} = {
    '/total':["热搜速递", "总览"],
    '/graph':["热搜分析"],
    '/present':["热搜详情", "单日热搜"],
    '/history':["热搜详情", "历史七天"],
  }

  const breadCrumb = ref(JSON.parse('["热搜速递", "总览"]'))

  const selectMenu = (index: any) => {
    breadCrumb.value = map[index as keyof typeof map]
  }

  const user = window.getUser()
</script>

<style scoped lang="scss">
:deep(.el-container) {
  box-sizing: border-box;
}

:deep(.el-main) {
  --el-main-padding: 20px; /* 保持与内联样式一致 */
}

:deep(.el-header) {
  --el-header-padding: 0 20px; /* 规范padding */
}
</style>
